<template>
  <a-layout class="layout-container">
    <a-layout-sider collapsible>
      <div class="logo">WMS</div>
      <a-menu :default-selected-keys="['/']" @menu-item-click="onMenuItemClick">
        <a-menu-item key="/">
          <template #icon>
            <icon-home/>
          </template>
          仪表盘
        </a-menu-item>
        <a-menu-item key="/products">
          <template #icon>
            <icon-archive/>
          </template>
          货品管理
        </a-menu-item>
        <a-sub-menu key="/system" v-if="userStore.userInfo?.roles?.includes('ADMIN')">
          <template #icon>
            <icon-settings/>
          </template>
          <template #title>系统管理</template>
          <a-menu-item key="/system/user">
            <template #icon>
              <icon-user-group/>
            </template>
            用户管理
          </a-menu-item>
          <a-menu-item key="/system/role">
            <template #icon>
              <icon-safe/>
            </template>
            角色管理
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="layout-header">
        <a-space>
          <span v-if="userStore.userInfo">
            欢迎您, {{ userStore.userInfo.fullName || userStore.userInfo.username }}
          </span>
          <a-button type="text" @click="handleLogout">
            <template #icon>
              <icon-export/>
            </template>
            退出登录
          </a-button>
        </a-space>
      </a-layout-header>
      <a-layout-content class="layout-content">
        <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import {
  IconExport,
  IconHome,
  IconSafe,
  IconSettings,
  IconUserGroup
} from '@arco-design/web-vue/es/icon'
import {useRoute, useRouter} from 'vue-router' // + 导入 useRoute
import {useUserStore} from '@/stores/user'
import {Message} from '@arco-design/web-vue'
import {ref, watch} from 'vue' // + 导入 ref 和 watch

const router = useRouter()
const route = useRoute() // + 获取当前路由
const userStore = useUserStore()

// + 创建响应式数据来同步菜单高亮
const selectedKeys = ref<string[]>([route.path])

// + 监听路由变化，自动更新菜单高亮
watch(
  () => route.path,
  (newPath) => {
    selectedKeys.value = [newPath]
  }
)

const onMenuItemClick = (key: string) => {
  router.push(key)
}

const handleLogout = () => {
  userStore.logout()
  Message.success('已成功退出登录')
  router.push('/login')
}
</script>

<style scoped lang="scss">
.layout-container {
  height: 100vh;
}

.logo {
  height: 32px;
  margin: 16px;
  // var(--color-fill-2) 是一个比背景略深的中性填充色
  background: var(--color-fill-2);
  // var(--color-text-1) 是当前主题下最主要的文本颜色
  color: var(--color-text-1);

  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  border-radius: 4px;
}

.layout-header {
  height: 64px;
  background-color: var(--color-bg-2);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border);
}

.layout-content {
  padding: 24px;
  background-color: var(--color-bg-1);
}
</style>
